<template>
  <el-dialog
    title="个人中心"
    :visible.sync="dialogVisible"
    :width="getwidth"
    :before-close="closeAddDialog"
    :append-to-body="true"
    :close-on-click-modal="false"
  >
    <el-tabs v-model="activeName"  tab-position="left" @tab-click="handleClick">
      <el-tab-pane label="账号信息" name="userInfo">
        <userInfo ref="refuserInfo" @closeAddDialog="closeAddDialog"></userInfo>
      </el-tab-pane>
      <!-- <el-tab-pane label="修改手机号" name="updateMobile">
        <updateMobile ref="refupdateMobile" @closeAddDialog="closeAddDialog"></updateMobile>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="updatePassword">
        <updatePassword ref="refupdatePassword" @closeAddDialog="closeAddDialog"></updatePassword>
      </el-tab-pane> -->
      <el-tab-pane label="切换机构" name="updateOrg" v-if="(user.roleName=='ORG_ADMIN' || user.roleName=='INSTERALL_USER') && spacesManage.organizationInfo.parentId">
        <updateOrg ref="refupdateOrg" @closeAddDialog="closeAddDialog"></updateOrg>
      </el-tab-pane>
      <el-tab-pane label="登录日志" name="loginLog">
        <loginLog ref="refloginLog"></loginLog>
      </el-tab-pane>
    </el-tabs>
    
  </el-dialog>
</template>

<script>
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { reqLoginLog } from "@/api/api";
import { mapState } from "vuex";
import userInfo from './command/userInfo'
import updateMobile from './command/updateMobile'
import updatePassword from "./command/updatePassword";
import updateOrg from "./command/updateOrg";
import loginLog from "./command/loginLog";

export default {
  name: "",
  components: { Pagination ,userInfo,updateMobile,updatePassword,updateOrg ,loginLog},
  mixins: [tableStyleMixin],
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      page: 1,
      limit: 10,
      total: 0,
      activeName: "userInfo",
    };
  },
  computed: {
    ...mapState(["user","spacesManage"]),
    getwidth(){
        if(this.activeName=='userInfo'){
            return '860px'
        }else if(this.activeName=='updateMobile'){
             return '860px'
        }else if(this.activeName=='updatePassword'){
             return '860px'
        }else if(this.activeName=='updateOrg'){
             return '860px'
        }else if(this.activeName=='loginLog'){
             return '860px'
        }else{
             return '860px'
        }
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        // this.LoginLog();
        this.activeName = 'userInfo'
        this.$nextTick(()=>{
            this.$refs.refuserInfo.getInfo()
        })
      }
    },
  },
  created() {
  },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      this.activeName = tab.paneName;
      if (tab.paneName == "userInfo") {
       this.$refs.refuserInfo.getInfo()
      } else if (tab.paneName == "updateMobile") {
      }else if (tab.paneName == "updatePassword") {
      }else if (tab.paneName == "updateOrg") {
        this.$refs.refupdateOrg.getInfo()
      }else if (tab.paneName == "loginLog") {
        this.$refs.refloginLog.LoginLog()
      }
    },
    // 获取登录日志
    async LoginLog() {
      let res = await reqLoginLog(this.page, this.limit, {
        userId: this.user.userId,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      //   console.log(res);
      this.tableData = res.data.rows;
      this.total = res.data.total || 0;
    },
    // 点击确定修改密码
    async addSubmit() {
      this.dialogVisible = false;
    },
    // 点击关闭弹框
    closeAddDialog() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped lang="less">
// 导航栏颜色
::v-deep .el-tabs__item {
  color: @primaryThemeTxtColor2;
  width: 155px;
  text-align: center;
  padding: 0  !important;
}

::v-deep .el-tabs__active-bar {
  background-color: #7367f0;
  background: #7367f0;
}

::v-deep .el-tabs__item.is-active {
  color: #fff;
  background: #7367f0 !important;
  // border-radius: 3px;
  width: 155px;
}
::v-deep .el-tabs--left .el-tabs__item.is-left{
  text-align: center;
  font-size: 14px;
}

::v-deep .el-dialog__body {
  padding: 20px ;
}

// 导航栏线条颜色
::v-deep .el-tabs__nav-wrap::after {
  // background: @primaryBgcolor11;
  // background: #ccc;
  // background: #ccc;
  width: 0 !important;
}
::v-deep .el-tabs__header{
  border-bottom:none !important;
}
/* 针对 el-tabs 组件的右侧线条进行样式覆盖 */
::v-deep .el-tabs--left .el-tabs__active-bar.is-left{
  width: 0 !important;
}

::v-deep .el-tabs--left .el-tabs__nav-wrap.is-left{
  height: 500px;
  border-right: 1px solid @primaryBorderColor6;
}
</style>
